import React from 'react';
import CommentApp from './CommentApp';

const CommentList = ({ comments, activeType }) => {
  const activeComments = () => {
    if (activeType === 'Good') {
      return comments.filter((item) => item.rating === 4 || item.rating === 5);
    }
    if (activeType === 'Middle') {
      return comments.filter((item) => item.rating === 2 || item.rating === 3);
    }
    if (activeType === 'Bad') {
      return comments.filter((item) => item.rating === 0 || item.rating === 1);
    }
    if (activeType === 'All') {
      return comments;
    }
    return comments;
  };
  return (
    <ul>
      {activeComments().map((item) => (
        <li key={item.id}>
          <span>{item.user}</span>
          <span>Rating:{item.rating}</span>
          <p>{item.comments}</p>
        </li>
      ))}
    </ul>
  );
};

export default CommentList;
